<!DOCTYPE html>
<!--
  ~ Copyright 2009-2015 by WWW.KNET.CN  All rights reserved.
  -->

<html>
<head lang="ch">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10,IE=11"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">
    <script src="../../jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <link href="../../bootstrap/2.3.1/css_cerulean/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script src="../../bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../../bootstrap/font-awesome-4.3.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
    <script src="../../bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script>
    <![endif]-->
    <link href="../../jquery-select2/3.4/select2.min.css" rel="stylesheet"/>
    <script src="../../jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
    <script src="../../common/mustache.min.js" type="text/javascript"></script>
    <link href="../../common/jeesite.min.css" type="text/css" rel="stylesheet"/>
    <script src="../../common/jeesite.min.js" type="text/javascript"></script>

    <link href="../summernote.css" type="text/css" rel="stylesheet"/>
    <script src="../summernote.js" type="text/javascript"></script>
    <script src="../lang/summernote-zh-CN.js" type="text/javascript"></script>
    <script src="../toolbar.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
//增加一个自定义按钮呢
            var tmpl = $.summernote.renderer.getTemplate();
            $.summernote.addPlugin({
                                       buttons: {
                                           "hello": function (lang, options) {
// make icon button by template function
                                               return tmpl.iconButton('fa fa-header', {
// callback function name when button clicked
                                                   event: 'hello',
// set data-value property
                                                   value: 'hello',
                                                   hide: true
                                               });
                                           }

                                       },
                                       events: {
                                           "hello": function (layoutInfo, value) {
                                               alert(layoutInfo);
                                               alert(value);
                                           }
                                       }
                                   });
            var bar = toolsBar.smaple;
            bar.push(['group', ['hello']]);
            $('#sn1').summernote({
                                     height: 200,
                                     tabsize: 2,
                                     lang: "zh-CN"
                                     //toolbar: toolsBar.smaple
                                 });

        });
        var edit = function () {
            $('.click2edit').summernote({focus: true});
        };
        var save = function () {
            var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
            $('.click2edit').destroy();
        };
    </script>
</head>
<body>
<table class="table table-condensed">
    <tr>
        <td>
            全功能

<pre>
<textarea id="sn1"><p>什么什么 <b>测试</b></p></textarea>
</pre>
        </td>
    </tr>
    <tr>
        <td>
            按按钮
            <br>
            <button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
            <button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
<pre>
<div class="click2edit">click2edit</div>
</pre>
        </td>
    </tr>
</table>

</body>
</html>